<!DOCTYPE html>
<html lang="zh">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>统计端-导入表格</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<!-- jqGrid组件基础样式包-必要 -->
		<link rel="stylesheet" href="jqgrid/css/ui.jqgrid.css" />
		<link rel="stylesheet" href="jqgrid/css/bootstrap.min.css" />
		<link rel="stylesheet" href="jqgrid/css/layui.css" />
		<link rel="stylesheet" href="jqgrid/css/common.css" />
		
		<!-- jqGrid主题包-非必要 --> 
		<!-- 在jqgrid/css/css这个目录下还有其他的主题包，可以尝试更换看效果 -->
		<link rel="stylesheet" href="jqgrid/css/css/redmond/jquery-ui-1.8.16.custom.css" />

		<!-- jquery插件包-必要 -->
		<!-- 这个是所有jquery插件的基础，首先第一个引入 -->
		<script type="text/javascript" src="js/jquery.min.js"></script>
		
		<!-- jqGrid插件包-必要 -->
		<script type="text/javascript" src="jqgrid/js/jquery.jqGrid.src.js"></script>
		
		<!-- jqGrid插件的多语言包-非必要 -->
		<!-- 在jqgrid/js/i18n下还有其他的多语言包，可以尝试更换看效果 -->
		<script type="text/javascript" src="jqgrid/js/i18n/grid.locale-cn.js"></script>
		<title>http://blog.mn886.net/jqGrid</title>
		
		<!-- 本页面初始化用到的js包，创建jqGrid的代码就在里面 -->
		<script type="text/javascript" src="js/common.js"></script>
		<script type="text/javascript" src="js/fileDownload.js"></script>
		<script type="text/javascript" src="js/layui.js"></script>
	<style type="text/css">

body {
	background: #fff; /* fallback for old browsers */
	/* background: -webkit-linear-gradient(right, #2087df, #2087df);
	background: -moz-linear-gradient(right, #76b852, #8DC26F);
	background: -o-linear-gradient(right, #76b852, #8DC26F);
	background: linear-gradient(to left, #76b852, #8DC26F); */
	font-family: "Roboto", sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* padding: 0px 20px; */

}
.btn-upload{
	margin-bottom: 40px;
}
.file{
	margin-bottom: 10px;
}
.prt{
	cursor: pointer;
}
.select-all{
	margin: 5px 0;
}
.form-item{
	margin: 30px 0;
}
.item-title{
	border-left: 3px solid #009688;
	padding-left: 10px;
	margin-bottom: 10px;
	font-size: 16px;
	font-weight: 600;
}
.isSeclet{
	color:#009688;
}
.item-con{
	padding-left: 10px;
}
.list{
	margin-bottom: 15px;
}
.btn{
	margin-top: 10px;
}
.btn-box{
	overflow: hidden;
}
.btn-right{
	float: right;
}

.result-box{
	display: none;
}
.fl{
	float: left;
	line-height: 38px;
}
.error-box{
	color: red;
	display: none;
}
.btn-loadhistory{
	margin-right: 10px;
}
</style>
	</head>
	<body>
		<header class="nav">
			<ul class="layui-nav layui-bg-green" lay-filter="">
				<li data-link="statisticsList" class="layui-nav-item"><a href="#">统计端-查询</a></li>
				<li data-link="statistics" class="layui-nav-item"><a href="#">统计端-统计</a></li>
				<li data-link="uploadtable" class="layui-nav-item layui-this"><a href="#">统计端-导入表格</a></li>
				<li data-link="restdata" class="layui-nav-item"><a href="#">统计端-初始化</a></li>
				<li data-link="login" class="layui-nav-item " style="float: right;"><a href="#">退出</a></li>
				<li data-link="update" class="layui-nav-item " style="float: right;"><a href="#">修改密码</a></li>
			  </ul>
		</header>
		<div class="page content">
			<form class="selected-wrap" id="form1" action="Upload" method="post"  enctype="multipart/form-data">
			<div class="form-item">
				 <div class="item-title">
					请选择要导入的文件：
				</div> 
			
				<div class="layui-upload">
					<button type="button" class="layui-btn layui-btn-primary layui-btn-sm" id="testList">选择文件</button> 
					<div class="layui-upload-list">
					  <table class="layui-table">
						<thead>
						  <tr><th>文件名</th>
						  <th>大小</th>
						  <th>状态</th>
						  <th>操作</th>
						</tr></thead>
						<tbody id="demoList"></tbody>
					  </table>
					</div>
					<button type="button" class="layui-btn" id="testListAction">开始上传</button>
				  </div> 
					
				<div class="error-box">

				</div>
			</div>

			<div class="result-box">


			<div class="form-item">
				<div class="item-title">
					检查结果：
				</div>
				<div class="item-con">
					<div class="list">
						<span  class="con-title">导入省公司：</span>
						<span class="sgs">
							
						</span>
					</div>
					<div class="list">
						<span  class="con-title">导入检测数据数量：</span>
						<span class="sl">
							
						</span>
					</div>
					<div class="list">
						<span  class="con-title">导入成功的数据数量：</span>
						<span class="cgsl">
							
						</span>
					</div>
					<div class="list">
						<span  class="con-title">导入失败的数据数量：</span>
						<span class="sbsl">
							
						</span>
					</div>
					
				</div>
		</div>
	</div>


				<div class="item-title">
					<span class="fl">失败明细：</span>
					<div class="btn-box">
						<button type="button" class="layui-btn btn-right" onclick="exportData()" id="export-jg">导出</button>
						<button type="button" class="layui-btn btn-right btn-loadhistory" id="look">查看历史失败明细</button>
					</div>
				</div>
				<span>
					<table id="list2"></table> 
					<div id="pager2"></div>
					
				</span>
	

			</form>
		</div>
		<div id="updatepassword" class="updatepwd">
			<form action="" class="layui-form" lay-filter="form" method="post">
				<div class="layui-form-item">
					<label class="layui-form-label" style="width: 100px;">旧密码</label>
					<div class="layui-input-inline">
					  <input  type="password" name="originalPassword" required lay-verify="originalPassword" placeholder="请输入旧密码" autocomplete="off" class="layui-input">
					</div>
				  </div>
				<div class="layui-form-item">
				  <label class="layui-form-label" style="width: 100px;">新密码</label>
				  <div class="layui-input-inline">
					<input  type="password" name="newPassword" required lay-verify="newPassword" placeholder="请输入新密码" autocomplete="off" class="layui-input">
				  </div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label" style="width: 100px;">确认密码</label>
					<div class="layui-input-inline">
					  <input  type="password" name="confirmPassword" required lay-verify="confirmPassword" placeholder="请输入确认密码" autocomplete="off" class="layui-input">
					</div>
				  </div>
				<div class="layui-form-item">
				  <div style="text-align: center;">
					<button type="button" id="submit" class="layui-btn" lay-submit lay-filter="submit">确定</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				  </div>
				</div>
			</form>
		</div>
	 

<script type="text/javascript">
layui.use('upload', function(){
  var upload = layui.upload;
  //多文件列表示例
  var demoListView = $('#demoList'),uploadListIns = upload.render({
    elem: '#testList'
    ,url: 'http://localhost:8888/chx/temimport/importexcel' //改成您自己的上传接口
	,accept: 'file'
	,exts: 'xls|excel|xlsx' //只允许上传压缩文件
    ,multiple: true
	,auto: false
	,field: 'files'
    ,bindAction: '#testListAction'
    ,choose: function(obj){   
      var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
      //读取本地文件
      obj.preview(function(index, file, result){
        var tr = $(['<tr id="upload-'+ index +'">'
          ,'<td>'+ file.name +'</td>'
          ,'<td>'+ (file.size/1024).toFixed(1) +'kb</td>'
          ,'<td>等待上传</td>'
          ,'<td>'
            ,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
            ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
          ,'</td>'
        ,'</tr>'].join(''));
        
        //单个重传
        tr.find('.demo-reload').on('click', function(){
          obj.upload(index, file);
        });
        
        //删除
        tr.find('.demo-delete').on('click', function(){
          delete files[index]; //删除对应的文件
          tr.remove();
          uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
        });
        
        demoListView.append(tr);
      });
    }
    ,done: function(res){
		console.log(res)
		if(res.code==200&&res.success){
						var listdata=res.data
						$('.sgs').html(listdata.provincecompanyname)
						$('.cgsl').html(listdata.success)
						$('.sbsl').html(listdata.error)
						$('.sl').html(listdata.count)
						$('.result-box').show()
						$('.error-box').hide()
					
					}else{
						$('.error-box').show()
						$('.error-box').text(res.msg)


					}
					pageInit('http://localhost:8888/chx/exporterror/selectbycondition','post');
    //   if(res.files.file){ //上传成功
    //     var tr = demoListView.find('tr#upload-'+ index)
    //     ,tds = tr.children();
    //     tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
    //     tds.eq(3).html(''); //清空操作
    //     return delete this.files[index]; //删除文件队列已经上传成功的文件
    //   }
    //   this.error(index, upload);
    }
    ,error: function(index, upload){
      var tr = demoListView.find('tr#upload-'+ index)
      ,tds = tr.children();
      tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
      tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
    }
  });
});
// 'http://localhost:8888/chx/exporterror/selectbycondition'
	$(function(){
		pageInit('data/JSONData.json','get')
			// 查看历史数据
			$('#look').click(function(){
				pageInit('http://localhost:8888/chx/exporterror/selectbycondition','post');
			})
		

		
	})
	function pageInit(thisurl,thistype){
		$('#list2').jqGrid('GridUnload');
		jQuery("#list2").jqGrid(
			{
			url : thisurl,//组件创建完成之后请求数据的url
			datatype : "json",
			colNames : [ '省公司', '文件名', '序号', '盘号', '错误类型','错误描述' ],//jqGrid的列显示名字
			colModel : [ 
						{name : 'id',index : 'id',width : 120,align : "center",sortable : false}, 
						{name : 'invdate',index : 'invdate',width : 90,align : "center",sortable : false}, 
						{name : 'name',index : 'name asc, invdate',width : 80,align : "center",sortable : false}, 
						{name : 'amount',index : 'amount',width : 80,align : "center",sortable : false}, 
						{name : 'tax',index : 'tax',width : 80,align : "center",sortable : false}, 
						{name : 'tax',index : 'tax',width : 180,align : "center",sortable : false}, 
						],
			rowNum : 10,
			rowList : [ 10, 20, 30 ],
			pager : '#pager2',
			sortname : 'id',
			mtype : thistype,
			viewrecords : true,
			sortorder : "desc",
			caption : "失败明细",//表格的标题名字
			});
			// jQuery("#list2").jqGrid('navGrid', '#pager2', {edit : false,add : false,del : false});

			$("#list2").setGridHeight(250)
			$("#list2").setGridWidth($(window).width()-100)

		}
	
	// 导出
	function exportData() {
				var url='http://localhost:8888/chx/exporterror/exportexcel';	
				$.fileDownload(url,{
					httpMethod: 'get',
					prepareCallback:function(url){
					   $('#export-hg').text('导出')
					},
					successCallback:function(url){
					$('#export-hg').text('导出')
					},
				failCallback: function (html, url) {
					$('#export-hg').text('导出')
				}
				})
			}
	</script>
	
</body>
</html>